<template>
	<view class="registe-page">
		<view class="head-goback">
			<view class="click-area" @click="$tool.navigateTo('/pages/login/login')"></view>
		</view>

		<view class="content">
			<app-title style="margin: 0 auto;" text="注册" :width="64"></app-title>
			<view class="register">
				<view class="item">
					<view class="label">手机号</view>
					<view class="value">
						<input type="number" maxlength="11" v-model="phone" />
					</view>
				</view>
				<view class="item">
					<view class="label">验证码</view>
					<view class="value authcode">
						<input type="number" maxlength="6" v-model="code" />
						<button type="default" @click="sendCaptcha">{{captchaText}}</button>
					</view>
				</view>
				<view class="item">
					<view class="label">密码</view>
					<view class="value">
						<input type="password" v-model="password" />
					</view>
				</view>
				<view class="item">
					<view class="label">确认密码</view>
					<view class="value">
						<input type="password" v-model="Confpassword" />
					</view>
				</view>
				<!-- <view class="item">
					<view class="label">身份证号</view>
					<view class="value">
						<input type="text" v-model="idCard" />
					</view>
				</view> -->
	<!-- 			<view class="item">
					<view class="label">支付宝账号</view>
					<view class="value">
						<input type="text" v-model="alipay" />
					</view>
				</view> -->
			</view>
		</view>

		<view class="footer">
			<view class="rule">
				<view class="rule-check">
					<checkbox-group @change="authCheng">
						<label>
							<checkbox color="#FFBD47" value="test" :checked="authCheck" />同意SKY数字藏品,
						</label>
					</checkbox-group>
				</view>
				<view class="rule-text" @click="$tool.navigateTo('/pages/rule/rule')">
					<text>《隐私政策》</text>,<text>《使用条款》</text>
				</view>
			</view>
			<button type="default" @click="registerSubmit">立即注册</button>
		</view>
	</view>
</template>

<script>
	import {
		register,
		getAuthenticationCode
	} from '../../request/login-api.js'
	import {
		getUrlParam
	} from '../../utils/utils.js'
	import {
		userUpdate
	} from '../../request/common-api.js'
	import {
		getSysUser
	} from '../../request/mine.js'
	export default {
		data() {
			return {
				// 同意隐私政策
				authCheck: false,
				// 邀请code
				invitation: '',
				// 验证码
				code: '',
				// 手机号
				phone: '',
				// 密码
				password: '',
				// 确认密码
				Confpassword: '',
				// 验证码按钮状态
				captchaBool: true,
				// 验证码时间
				captchaTime: 60,
				// 验证码定时器
				captchaTimer: null,
				// 验证码提示文字
				captchaText: "发送验证码",
				// 支付宝
				alipay: '',
				// 身份证
				idCard: ''
			}
		},
		created() {
			this.invitation = getUrlParam('userCode')
		},
		methods: {
			// 隐私政策 变化
			authCheng(e) {
				this.authCheck = e.detail.value.length ? true : false
			},

			// 刷新用户数据
			async updateUserInfo() {
				try {
					let {
						code,
						data
					} = await getSysUser()
					if (code === 200) {
						let user = JSON.parse(uni.getStorageSync('user'))
						user = {
							...user,
							...data
						}
						uni.setStorageSync('user', JSON.stringify(user))
					} else {
						uni.showToast({
							title: message,
							icon: 'none'
						})
					}
				} catch {
					uni.showToast({
						title: '服务繁忙',
						icon: 'error'
					})
				}
			},

			// 注册
			async registerSubmit(values) {
				if (!this.code && !this.phone && !this.password && !this.Confpassword) {
					uni.showToast({
						title: '请完整输入每一项',
						icon: 'none'
					})
					return false
				}

				if (this.password !== this.Confpassword) {
					uni.showToast({
						title: '两次密码密码不一致，请重新输入',
						icon: 'none'
					})
					return false
				}
				// if (!this.idCard) {
				// 	uni.showToast({
				// 		title: '请完整输入身份证号码',
				// 		icon: 'none'
				// 	})
				// 	return false
				// }
				// if (!this.alipay) {
				// 	uni.showToast({
				// 		title: '请完整输入支付宝账号',
				// 		icon: 'none'
				// 	})
				// 	return false
				// }
				if (!this.authCheck) {
					uni.showToast({
						title: '请阅读并勾选用户协议',
						icon: 'none'
					})
					return false
				}
				uni.showLoading({
					title: '注册中...'
				})
				try {
					let {
						code,
						data,
						message
					} = await register({
						code: this.code,
						phone: this.phone,
						password: this.password,
						userCode: this.invitation,
					})
					if (code === 200) {
						uni.showToast({
							title: '注册成功',
							icon: 'success'
						})
						this.code = ''
						this.phone = ''
						this.password = ''
						data.login = true
						uni.setStorageSync('user', JSON.stringify(data))
						uni.reLaunch({
							url: "../home/home",
							animationType: 'pop-in',
							animationDuration: 200
						})
						this.onChangeUserInfo(data.id)
					} else {
						uni.showToast({
							title: message,
							icon: 'none'
						})
					}
					uni.hideLoading()
				} catch {
					uni.hideLoading()
					uni.showToast({
						title: '服务繁忙',
						icon: 'none'
					})
				}
			},

			// 更新用户信息
			async onChangeUserInfo(id) {
				try {
					let {
						code,
						message,
						data
					} = await userUpdate({
						id: id,
						idCard: this.idCard,
						alipayAccount: this.alipay
					})
					if (code === 200) {
						this.updateUserInfo()
					} else {
						uni.showToast({
							title: message,
							icon: 'none'
						})
					}
				} catch (err) {
					console.log(err)
					uni.showToast({
						title: '服务繁忙',
						icon: 'error'
					})
				}
			},

			// 发送验证码
			async sendCaptcha() {
				// 判断
				if (this.captchaTime !== 60) return false
				this.captchaTime -= 1
				this.captchaTimer = setInterval(() => {
					this.captchaTime -= 1
					this.captchaText = this.captchaTime + ' s'
					if (this.captchaTime === 0) {
						clearInterval(this.captchaTimer)
						this.captchaTime = 60
						this.captchaText = '发送验证码'
					}
				}, 1000)

				// 验证码参数
				let params = {
					phone: this.phone
				}

				// 发送验证码
				try {
					let {
						code,
						message
					} = await getAuthenticationCode(params)

					if (code === 200) {
						// this.code = 992736
						uni.showToast({
							title: '短信发送成功',
							icon: 'success'
						})
					} else {
						uni.showToast({
							title: message,
							icon: 'error'
						})
						this.captchaTime = 60
					}
				} catch {
					uni.showToast({
						title: '服务繁忙',
						icon: 'error'
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.registe-page {
		width: 100%;
		min-height: 100vh;
		background: $login-background-url no-repeat;
		background-size: 100% auto;
		background-position: 0 -60rpx;
		display: flex;
		flex-direction: column;
	}

	.head-goback {
		width: 200rpx;
		height: 200rpx;
		position: absolute;
		top: 50%;
		left: -35rpx;
		transform: translateY(calc(-50% + 16rpx));
		background: $common-goback-url no-repeat;
		background-size: 100% 100%;
		background-position: 0 0;
		position: absolute;
		top: 50rpx;
		left: -35rpx;

		.click-area {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			position: absolute;
			left: 56rpx;
			top: 58rpx;
			z-index: 2;
		}
	}

	.content {
		flex: 1;
		width: 100%;
		padding: 200rpx 30rpx 30rpx 30rpx;

		.register {
			width: 100%;
			margin-top: 40rpx;
			display: flex;
			flex-direction: column;
			background: $common-back-huxing-url no-repeat;
			background-size: 100% 100%;
			background-position: 0 0;
			padding: 70rpx 10rpx 40rpx 10rpx;

			.item {
				width: 100%;
				height: 70rpx;
				display: flex;
				align-items: center;
				position: relative;
				margin-bottom: 30rpx;

				.label {
					width: 160rpx;
					font-size: 14px;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #BFCBCD;
					text-indent: 20rpx;
				}

				.value {
					flex: 1;
					height: 66rpx;
					line-height: 66rpx;
					background: linear-gradient(45deg, #050505, #383838);
					border-radius: 12rpx;
					text-indent: 10rpx;
					color: #7B7B7B;
					margin: 0 20rpx;

					input {
						width: 100%;
						height: 100%;
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #7B7B7B;
					}
				}

				.authcode {
					display: flex;

					input {
						flex: 1;
					}

					button {
						width: 160rpx;
						font-size: 10px;
						font-family: SourceHanSansCN-Regular, SourceHanSansCN;
						font-weight: 400;
						color: #FFBD47;
						background: none;
						padding: 0;
					}

					button:after {
						border: none
					}
				}
			}
		}
	}

	.footer {
		width: 100%;
		height: 210rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.rule {
			width: 688rpx;
			height: 90rpx;
			margin: 0 auto;
			text-align: center;
			font-size: 28rpx;
			color: #676767;
			padding: 30rpx 0 0 0;
			display: flex;
			justify-content: center;
			position: relative;

			.rule-check {
				height: 40rpx;

				/deep/ .uni-checkbox-input {
					border-radius: 50%;
					background-color: rgba(0, 0, 0, 0);
					border-color: #FFBD47;
					transform: scale(0.8);
				}

				/deep/ .uni-checkbox-input-checked {
					border-color: #FFBD47 !important;
				}

				/deep/ .uni-checkbox-input:hover {
					border-color: #FFBD47 !important;
				}
			}

			.rule-text {
				height: 40rpx;

				text {
					color: #0091FF;
				}
			}
		}

		button {
			width: 684rpx;
			height: 88rpx;
			margin: 0 10rpx;
			line-height: 88rpx;
			background: #121212;
			box-shadow: -10px -10px 20px 0px rgba(39, 39, 39, 0.54), 10px 10px 20px 0px rgba(0, 0, 0, 0.83);
			border-radius: 22px;
			border: 1px solid #FFBD47;
			font-size: 14px;
			font-family: SourceHanSansCN-Regular, SourceHanSansCN;
			font-weight: 400;
			color: #FFBD47;
		}
	}
</style>
